<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>
    <link rel="StyleSheet" href="../css/category.css" type="text/css" media="screen"/>
    <div id="separator">${sessionScope.category.name}</div>

    <c:forEach var="product" items="${sessionScope.productList}">
        <div class="product" style="background-image: url('../images/${product.categoryId}product.png')">
            <div class="backgroundProcess"></div>
            <div class="productText">
                <div class="title">${product.name}</div>
                <div class="explain">${product.productId}</div>
            </div>
        </div>
    </c:forEach>

    <script>
        $(()=>
            {
                $.each($('.product'), (index, item)=>
                {
                    $(item).on('click', ()=>
                    {
                        viewProduct($(item).children('.productText').children('.explain').text());
                    });
                });

                $('#floatWindow').on('click', ()=>
                {
                    $('#floatWindow').addClass('hideFloatWindow').removeClass('showFloatWindow');
                    setTimeout(()=>
                    {
                        $('#floatWindow').css({'display': 'none'});
                    }, 300);
                });

                $('#displayBlock').on('click', (event)=>
                {
                    event.stopPropagation();
                }).on("mousewheel DOMMouseScroll", function (e) {
                    e.stopPropagation();
                });
            }
        );

        function viewProduct(productId)
        {
            $('#floatWindow').css({'height': window.innerHeight, 'display': 'block'}).addClass('showFloatWindow').removeClass('hideFloatWindow');
            $('#displayBlock').css({'left': '10%', 'width': '80%'});
            var product = 'productId=' + productId;
            $.get('viewProduct', product, (data)=>
            {
                $('#displayBlock').html(data);
            });
        }
    </script>

<%@ include file="../common/IncludeBottom.jsp"%>
